/**
 * 定义一个全局变量接收商品
 *
 */
let product;

/**
 * 获取id
 */
function getId() {
  let url = location.href;
  url = url.substring(url.indexOf("?") + 1);
  let arr = url.split("=");
  let id = arr[1];
  return id;
}
/**
 * 获取数据
 */
function productDetailList() {
  let id = getId();
  axios({
    method: "get",
    url: "http://api.yuguoxy.com/api/shop/find",
    params: {
      id,
    },
  }).then((response) => {
    let { resultCode, resultInfo } = response.data;
    if (resultCode == 1) {
      product = resultInfo;
      // console.log(resultInfo);
      showList(product);
    }
  });
}
/**
 * 2、动态渲染商品数据
 */
const glassEle = document.querySelector("main .glass");
const numEle = document.querySelector(".num");
function showList(product) {
  let showimg = `
           <div class="showbox">
          <div class="showbox-1"><img src="${product.picture}" alt=""></div>
          
           <div class="mask"></div>
           <div class="smallbox">
         <ul>`;
  let glasslist = `
            <li><img src="${product.picture}" alt=""></li>
            <li><img src="${product.list[1]}" alt=""></li>
            <li><img src="${product.list[2]}" alt=""></li>
            <li><img src="${product.list[3]}" alt=""></li>
            <li><img src="${product.list[4]}" alt=""></li>
        `;

  let bigimg = `
         </ul>
         </div>
          </div>
          <div class="bigbox">
            <img src="${product.picture}" alt="">
          </div> `;

  glassEle.innerHTML = showimg + glasslist + bigimg;
  let priceEle = `
         <h4> <img class="taobao1"src="../static/images/detail_taobao1.png" alt="">
         <img class="taobao2" src="../static/images/detail02.png" alt="">&nbsp;${product.product}</h4>
        <p><span>原价:</span> <span class="oldprice">￥${product.oldprice}</span></p>
        <p><span>淘宝价:</span> <span class="doller">￥</span> <span class="price">${product.price}</span></p>
        <p><span class="express">快递:</span> <span>免运费</span></p>
         `;

  const pricee = document.querySelector("main .commodity-price");
  pricee.innerHTML = priceEle;
  let numstr = `
  <input type="button" value="-" ${
    product.putaway == 0 ? "disabled" : ""
  }><input type="text" value="${
    product.putaway
  }"><input type="button" value="+">
     `;

  numEle.innerHTML = numstr;

  inistpicture();
  glassImg();
  onSmallBox();
}

/**
 * 放大镜效果
 * 1、初始化图片
 *
 *
 */

function inistpicture() {
  const showboximg = document.querySelector(".showbox img");
  const mask = document.querySelector(".mask");
  const bigbox = document.querySelector(".bigbox");
  const bigimgEle = document.querySelector(".bigbox img");
  bigimgEle.style.width =
    showboximg.offsetWidth * (bigbox.offsetWidth / mask.offsetWidth) + "px";
  bigimgEle.style.height =
    showboximg.offsetHeight * (bigbox.offsetHeight / mask.offsetHeight) + "px";
}

/**
 * 2、给showbox绑定事件
 */
function glassImg() {
  const showboxEle = document.querySelector(".showbox");
  const mask = document.querySelector(".mask");
  const showboximg = document.querySelector(".showbox img");
  const bigbox = document.querySelector(".bigbox");
  const bigimgEle = document.querySelector(".bigbox img");
  showboximg.addEventListener("mouseover", function () {
    mask.style.display = "block";
    bigbox.style.display = "block";
  });
  showboximg.addEventListener("mousemove", function (e) {
    inistpicture();
    e = e || window.event;
    let x = e.offsetX - mask.offsetWidth / 2;
    let y = e.offsetY - mask.offsetHeight / 2;
    if (x < 0) {
      x = 0;
    }
    if (y < 0) {
      y = 0;
    }
    if (x > showboximg.offsetWidth - mask.offsetWidth) {
      x = showboximg.offsetWidth - mask.offsetWidth;
    }
    if (y > showboximg.offsetHeight - mask.offsetHeight) {
      y = showboximg.offsetHeight - mask.offsetHeight;
    }

    mask.style.left = x + "px";
    mask.style.top = y + "px";
    let movex = (x * showboximg.offsetWidth) / mask.offsetWidth;
    let movey = (y * showboximg.offsetHeight) / mask.offsetHeight;
    bigimgEle.style.left = -movex + "px";
    bigimgEle.style.top = -movey + "px";
  });
  showboximg.addEventListener("mouseout", function () {
    mask.style.display = "none";
    bigbox.style.display = "none";
  });
}
/**
 * 3、给smallbox绑定点击事件
 */
function onSmallBox() {
  const showboximg = document.querySelector(".showbox-1");
  const bigbox = document.querySelector(".bigbox");
  const liEles = document.querySelectorAll(".smallbox ul li");

  for (let i = 0; i < liEles.length; i++) {
    liEles[i].addEventListener("click", function () {
      let imgEle = this.innerHTML;
      bigbox.innerHTML = imgEle;
      showboximg.innerHTML = imgEle;
      glassImg();
    });
  }
}
/**
 *点击商品数量添加事件
 */
function onNum() {
  numEle.addEventListener("click", function (e) {
    e = e || window.event;
    let target = e.target || e.srcElement;
    if (target.getAttribute("value") == "+") {
      product.putaway++;
    }
    if (target.getAttribute("value") == "-") {
      product.putaway--;
    }
    showList(product);
  });
}
/**
 * 加入购物车
 */
const addbtn = document.querySelector(".addproduct");

function addProduct() {
  addbtn.addEventListener("click", function () {
    let userList=localStorage.getItem('userlist')
    if (userList==undefined) {
        alert('你还没有登录')

    }else{
      let productListStr = localStorage.getItem("myproduct");
    let productList = JSON.parse(productListStr) || [];
    let oldProduct = productList.find((item) => item.id == product.id);
    if (oldProduct) {
      oldProduct.num = oldProduct.num + Number(product.putaway);
      oldProduct.singlePrice=(oldProduct.num*oldProduct.price).toFixed(2)
    } else {
      let cartProdcut = {
        id: product.id, //商品id
        name: product.product, //商品名称
        price: product.price, //价格
        url: product.picture, //图片
        num: product.putaway, //数量
        state: false, //状态
        singlePrice:product.price*Number(product.putaway)
      };
      productList.push(cartProdcut);
    }
    localStorage.setItem("myproduct", JSON.stringify(productList));
    }
    
  });
}
/**
 * 查看购物车
 */
const lookbtn = document.querySelector(".lookproduct");
function lookProduct() {
 
  lookbtn.addEventListener("click", function () {
    let userList=localStorage.getItem('userlist')
    if (userList==undefined) {
       alert('你还没有登录')
       return
    }
    location.href = "../pages/shoppingcart.html";
  });
}
onNum();
addProduct();
lookProduct();
productDetailList();
